<template>
  <div class="order">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          @load="onLoad"
          :offset="offset"
        >
          <div class="orderlistbox" v-for="(item,index) in orderDataList" :key="index">
            <div class="orderlistitem">
              
              <ul>
                <li>
                  <div class="o-title">
                    <span>{{ item.giveDriveName}}</span>
                  </div>
                  <div class="o-content">
                    <p><span class="left">用车时间</span><span class="right">{{ item.applyDate }} {{ item.applyTime }}</span></p>
                    <p><span class="left">申请时间</span><span class="right">{{ item.createTime }}</span></p>
                    <p ><span class="left">用车位置</span><span class="text-right">{{ item.position }}</span></p>
                    <p><span class="left">联系方式</span><span class="right">{{ item.phone }}</span></p>
                    <!-- <p v-if="item.state == 2"><span class="left">审核时间</span><span class="right">{{ item.updateTime1 }}</span></p> -->
                    <p v-if="item.state == 4"><span class="left">交车时间</span><span class="right">{{ item.updateTime3 }}</span></p>
                    <p v-if="item.state == 3"><span class="left">送车司机</span><span class="right">{{ item.giveDriveName ? item.giveDriveName : '暂无' }}</span></p>
                    <p v-if="item.state == 3"><span class="left">司机电话</span><span class="right" style="color:#a92828"><a style="color:#AD2F2F;" :href="'tel:'+item.giveDrivePhone">{{item.giveDrivePhone ? item.giveDrivePhone : '暂无'}}</a></span></p>
                    <!-- <p v-if="item.state == 5"><span class="left">接车人姓名</span><span class="right">{{ item.returnDriveName ? item.returnDriveName : '暂无'  }}</span></p>
                    <p v-if="item.state == 5"><span class="left">接车人电话</span><span class="right">{{ item.returnDrivePhone ? item.returnDrivePhone : '暂无'  }}</span></p> -->
                    <p><span class="left">到期时间</span><span class="right" style="color:#a92828">{{ item.freeEndTime }}</span></p>
                    <p v-if="item.state == 5"><span class="left">还车时间</span><span class="right">{{ item.rdate+' '+item.rtime }}</span></p>
                    
                    <p><span class="left">订单状态</span><span class="text-right"  v-if="item.returnDriveName&&item.state !=5&&item.state !=40">司机正在上门取车途中,<br/>司机姓名：{{ item.returnDriveName ? item.returnDriveName : '暂无'}}<br/>联系方式：<a style="color:#AD2F2F;" :href="'tel:'+item.returnDrivePhone">{{item.returnDrivePhone ? item.returnDrivePhone : '暂无'}}</a></span> <span v-else :class="item.state == 1|| item.state == 2 &&item.state !=5 ? 'right red' : item.state == 3|| item.state==5? 'right green' : 'right red'">{{ item.stateName }}</span></p>
                    <!-- <p v-if="item.state == 4" class="button-row"><span class="left"></span><span class="right"><van-button v-if="item.returnState ===''" class="sbtn" @click="selectDropOff(item.id,item.servicecode)">还车</van-button><span class="textcolor" v-else>已申请还车,请注意客服回电</span></span></p> -->
                    <p v-if="item.state == 4" class="button-row"><span class="left"></span><span class="right" style="float:right"><button v-if="item.returnState ===''" class="sbtn rbutton" @click="toreturncar(item.id,item.servicecode,item.regioncode)">申请还车</button><span style="color:#AD2F2F;" class="textcolor" v-else >已申请还车,请注意客服回电</span></span></p>
                    <!-- <p v-if="item.state == 5" class="button-row"><span class="textcolor"></span></p> -->
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
   
  </div>
</template>
<script>
export default {
  components: {
    
  },
  data(){
    return {
      offset:10,
      orderDataList:[],
      isLoading:false,
      finished:false,
      loading:false,
      finishedText:'没有更多了',
      userinfo:{},
      pageNum:0
    }
  },
  created(){
    let userinfos = JSON.parse(sessionStorage.getItem('userinfos'))
    this.userinfo = userinfos
    if(this.userinfo){

    }else{
      this.$router.push("/login");
    }
    sessionStorage.removeItem('useridname')
    this.querylist()
  },
  methods:{
     getStateName(state,remark1){
      let name = "";
      switch (state){
        case "1": name = '待审核';break;
        case "2": name = '待审核';break;
        case "3": name = '车辆派送中';break;
        case "4": name = '待还车';break;
        case "5": name = '已还车';break;
        case "10": name = '审核失败，'+remark1;break;//审核失败
        case "20": name = '审核失败';break;//待交车失败
        case "30": name = '交车失败';break;//已交车失败
        case "40": name = '还车失败';break;
        case "50": name = '还车失败';break;//已还车失败
      }
      return name
    },
    querylist(){
      this.pageNum++
      console.log(this.pageNum)
      let _this = this;
      let params = {
        pageNum: this.pageNum,
        pageSize: 10,
        registUserId: _this.userinfo.id,
        state: "'1','2','3','4','5','10','20','30','40','50'",
      }
      this.$post('/applyvehicle/pageQuery',params).then( res => {
        console.log(res)
          if(res.code=='200'){
            let data = res.data.records;
            data.filter((item)=>{
            // console.log(item)
            if(item.idCardFaceInfo==''){
              item.name=''
            }else{
              item.name = JSON.parse(item.idCardFaceInfo).name;
            }
            
            item.stateName = _this.getStateName(item.state,item.remark1);
          });
          if(this.pageNum==1){
            this.orderDataList = data
          }else{
            this.orderDataList = this.orderDataList.concat(data)
          }
            if(res.data.records.length>0){
              this.onLoad()
              this.loading=false
            }else{
              this.finished=true
            }
          }
          
          // this.$toast(res.msg)
          this.isLoading = false
      })
    },
    toreturncar(id,servicecode,regioncode){
      this.$router.push({path:"/returncar",query:{id:id,servicecode:servicecode,regioncode:regioncode}})
    },
    onRefresh(){
      this.isLoading=true
      this.finished = false
      this.orderDataList = []
      this.pageNum=0
      this.querylist()
    },
    onLoad(){
     
      console.log('onload')
      // this.loading=false
        this.querylist()
    }
  }
}
</script>
<style lang="scss" scoped>
.order{
  width: 100%;
  margin-bottom: 100px;
  box-sizing: border-box;
  // overflow: hidden;
  .green{
    color:#46aa43;
  }
  .red{
    color:#a92828;
    
  }
  .van-pull-refresh{
    overflow: visible;
  }
  .orderlistbox{
    width:calc(100% - 10px);
    margin: 0 auto;
    text-align: left;
    font-size: 14px;
    padding: 10px 20px;
    box-sizing: border-box;
    overflow: hidden;
    
    .orderlistitem{
      width:100%;
      background-color: white;
      padding:20px 30px;
      box-sizing: border-box;
      box-shadow:0px 2px 10px 0px rgba(152,152,152,0.2);
      overflow: hidden;
       .o-title{
        padding: 0 10px;
        line-height:30px;
        overflow: hidden;
        color: #333333;
        border-bottom:1px #eeeeee dashed;
      }
      
      p{
        display: block;
        overflow: hidden;
        width: 100%;
        line-height: 23px;
      }
      .left{
        float: left;
        
      }
      .red{
        color: #ad2f2f;
      }
      .right{
        padding-left: 20px;
      }
      .text-right{
        width:200px;
        float: right;
        padding-left: 10px;
        box-sizing: border-box;
      }
      .rbutton{
        padding: 5px 25px;
        background: #AD2F2F ;
        border: none;
        outline: none;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
      }
    }
  }
}

</style>
